<div class="file-uploader">
  <div class="modal-header">
    文件上传和查看
    <i class="yb-icon ico-close" ng-click="cancel()"></i>
  </div>
  <div class="modal-body clearfix">
    <div tabset type="tab">
      <div tab heading="{{canUpload?'上传':'查看'}}">
        <div class="flex-column">
          <div>
            <div ng-repeat="file in fileList track by $index" class="pull-left img-container m-t-sm">
              <div class="img-info" ng-if="file.isImg">
                <img ng-src="{{file.base64}}" ng-if="!!file.base64" />
                <img ng-src="{{file.imgUrlShow}}" ng-if="!file.base64 && !!file.imgUrlShow" />
              </div>
              <div class="img-info items-center p-x-5" style="word-break: break-all;" ng-if="!file.isImg">
                {{file.name}}
              </div>
              <span class="img-tips" ng-if="canUpload && file.hasUpload">
                <i class="glyphicon glyphicon-check" title="已上传"></i>
              </span>
              <span class="img-actions">
                <i class="glyphicon glyphicon-trash" title="删除" ng-click="delFile($index)" ng-if="canUpload"></i>
                <i class="glyphicon glyphicon-download-alt" ng-if="!!file.fileUrl" title="下载" ng-click="downloadAttach(file)"></i>
                <i class="glyphicon glyphicon-eye-open" ng-if="!!file.imgUrlShow" title="查看" ng-click="viewImage(file)"></i>
              </span>
            </div>
            <div class="pull-left img-uploader m-t-sm" ng-if="canUpload && fileList.length < maxFileCount"
              ngf-select="handleFileSelect($files)" ngf-multiple="true" ngf-keep-distinct="true" title="点击选择要上传的文件">
              <i class="glyphicon glyphicon-plus"></i>
            </div>
          </div>
          <div class="flex m-t danger-color" ng-if="canUpload">
            <div>注：</div>
            <div>
              1，<span ng-if="!ignoreFileFormat">支持格式：{{ImgTypes}},{{FileTypes}}；</span>最大上传数量：{{maxFileCount}}个；文件最大：图片{{ImgSize}}M，文档{{FileSize}}M；<br />
              2，已上传的文件右上角会出现 <i class="glyphicon glyphicon-check" title="完成"></i>图标；<br />
              3，请先上传图片再点击确定按钮；
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary p-l-md p-r-md" ng-if="canUpload" ng-click="uploadFile()">上传</button>
    <button class="btn btn-primary p-l-md p-r-md" ng-if="canUpload" ng-click="ok()">确定</button>
    <button class="btn btn-default p-l-md p-r-md" type="button" ng-click="cancel()">取消</button>
  </div>
</div>
<style>
  .file-uploader .img-container .img-info {
    width: 100px;
    height: 100px;
  }

  .file-uploader .img-container .img-info img {
    width: 100%;
    height: 100%;
  }

  .file-uploader .img-uploader {
    width: 100px;
    height: 100px;
  }
</style>